<template>
  <div class="main-content">
    <el-carousel id="carousel" height="400px">
      <el-carousel-item v-for="item in 3">
        <div class="images"></div>
      </el-carousel-item>
    </el-carousel>
    <el-row id="cards" :gutter="20">
      <el-col v-for="cardData in cardDatas" :span="6">
        <Card :title="cardData.title" :info="cardData.info" :url="cardData.url"/>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
  let cardDatas = [
    { title:"第一链接", info: "第一段信息", url: "www.baidu.com"},
    { title:"第二链接", info: "第二段信息", url: "www.baidu.com"},
    { title:"第三链接", info: "第三段信息", url: "www.baidu.com"},
    { title:"第四链接", info: "第四段信息", url: "www.baidu.com"},
  ]
  import Card from './Card.vue'
</script>
<style scoped>
.images {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url("@/assets/imgs/黑洞3.png");
  background-size: cover;
  background-position: center center;
} 
#cards {
  margin-top: 20px;
  height: 100px;
}
.grid-content {
  min-height: 100px;
}
</style>